<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/main.css" />
		<style type="text/css">
			.chart {
				height: 200px;
				margin: 0px;
				padding: 0px;
			}
			h5 {
				margin-top: 30px;
				font-weight: bold;
			}
			h5:first-child {
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<!--顶部样式-->
			<!-- <div class="mui-row mian-top">
				<span class="mui-icon mui-icon-extra mui-icon-extra-sweep mian-topLeft"></span>
				<span class="mui-icon mui-icon-extra mui-icon-extra-notice mian-topRight"></span>
			</div> -->
			<!--医生介绍部分-->
			<div class="mui-row userInfoBox">
				<div class="userImage">
					<div class="userImageTop">
						<img src="../../img/user.png" />
					</div>
					<div class="userImageBottopm">
						<span>
                            何川
                        </span>
					</div>
				</div>
				<div class='userInfo'>
					<div class="userInfoPro">
				    		<span>
				    			职称：副主任医师
				    		</span>
				    	</div>
				    	<div class="userInfoDtl ">
				    		<h5>简介:</h5>
				    		<p>从事骨科专业近20年，经过严格的大学本科骨科硕士和博士研究生学习，受教于中国工程院卢世璧院士，并经高级骨科医师训练班培训，具有扎实的专业理论和技能，主译和编辑专著四部，参加编译四部，发表专业论著三十余篇，现为骨科硕士研究生导师。</p>
				    	</div>
				    </div>
				</div>
				<!--4宫格-->
				<div class="foreDiv">
					<ul class="mui-table-view mui-grid-view mui-grid-9 mui-margin_1 mui-ul ">
						<li class="mui-table-view-cell mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3 " id="doctorWork">
							<a href="# ">
								<img src="../../img/TWWZ.png " class="img-width " />
								<div class="mui-media-body mui-title_ ">名医工作室</div>
								<!--<div class="mui-media-body " style="width: 30%; ">工作室</div>-->
							</a>
						</li>
						<li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3" id="photoDoctor">
							<a href="# ">
								<img src="../../img/MYZX.png " class="img-width " />
								<div class="mui-media-body mui-title_ ">图文问诊</div>
								<!--<div class="mui-media-body " >商城</div>-->
							</a>
						</li>
						<li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3 " id="vocalDoctor">
							<a href="# ">
								<img src="../../img/YYWZ.png " class="img-width " />
								<div class="mui-media-body mui-title_ ">语音问诊</div>
								<!--<div class="mui-media-body " style="width: 30%; ">工作室</div>-->
							</a>
						</li>
						<li class="mui-table-view-cell mui-table-view-cell_ mui-table-view-cell_ mui-media mui-col-xs-3 mui-col-sm-3 " id="littleClass">
							<a href="# ">
								<img src="../../img/JKSC.png" class="img-width " />
								<div class="mui-media-body mui-title_ ">微课堂</div>
								<!--<div class="mui-media-body " >商城</div>-->
							</a>
						</li>
					</ul>
				</div>
				<!--我的粉丝-->
				<div class="myFans">
					<h4>我的粉丝:</h4>
					<!--<div class="myFansMore">
						查看更多
						<span class="mui-icon mui-icon-arrowright"></span>
					</div>-->
					<div class="mui-content-padded">
						<h5>问诊类型</h5>
						<div class="chart">
							<div id="pieChart" style="width: 100%;height: 100%;"></div>
						</div>
						<h5>问诊次数</h5>
						<div class="chart">
							<div id="lineChart" style="width: 100%;height: 100%;"></div>
						</div>
					</div>
				</div>
		</div>
		<script src="../../libs/echarts-all.js"></script>
		<script src="../../js/mui.min.js "></script>
		<script type="text/javascript ">
			mui.plusReady(function() {
				document.getElementById('doctorWork').addEventListener('tap', function() {
				  //打开关于页面
				  	mui.openWindow({
				    url: 'template/doctorWorkDtl.html',
				    id: 'template/doctorWorkDtl.html',
				    styles:{
				      	top: '0',
			      		bottom: '0'
				      }
					});
				});
				document.getElementById('photoDoctor').addEventListener('tap', function() {
				  //打开关于页面
				  	mui.openWindow({
				    url: 'template/photoDoctor.html',
				    id: 'template/photoDoctor.html',
				    styles:{
				      	top: '0',
			      		bottom: '0'
				      }
					});
				});
				document.getElementById('vocalDoctor').addEventListener('tap', function() {
				  //打开关于页面
				  	mui.openWindow({
				    url: 'template/vocalDoctor.html',
				    id: 'template/vocalDoctor.html',
				    styles:{
				      	top: '0',
			      		bottom: '0'
				      }
					});
				});
				document.getElementById('littleClass').addEventListener('tap', function() {
				  //打开微课堂
				  	mui.openWindow({
				    url: 'template/littleClass.html',
				    id: 'template/littleClass.html',
				    styles:{
				      	top: '0',
			      		bottom: '0'
				      }
					});
				});
			});
		</script>
		<script type="text/javascript">
			var getOption = function(chartType) {
				var chartOption = chartType == 'pie' ? {
					calculable: false,
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						data: [{
							value: 2,
							name: '额骨骨折(2)'
						}, {
							value: 3,
							name: '腰部慢性劳损(3)'
						}, {
							value: 8,
							name: '骨折(8)'
						}]
					}]
				} : {
					legend: {
						data: ['访问量']
					},
					grid: {
						x: 35,
						x2: 10,
						y: 30,
						y2: 25
					},
					toolbox: {
						show: false,
						feature: {
							mark: {
								show: true
							},
							dataView: {
								show: true,
								readOnly: false
							},
							magicType: {
								show: true,
								type: ['line', 'bar']
							},
							restore: {
								show: true
							},
							saveAsImage: {
								show: true
							}
						}
					},
					calculable: false,
					xAxis: [{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}],
					yAxis: [{
						type: 'value',
						splitArea: {
							show: true
						}
					}],
					series: [{
						name: '蒸发量',
						type: chartType,
						data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 6, 11]
					}]
				};
				return chartOption;
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var lineChart = echarts.init(byId('lineChart'));
			lineChart.setOption(getOption('line'));
			var pieChart = echarts.init(byId('pieChart'));
			pieChart.setOption(getOption('pie'));
		</script>
	</body>
</html>